<template lang="html">
  <div id="bar" ref="bar"></div>
</template>

<script>
import * as d3 from 'd3'

export default {
  methods: {
    init () {
      let data = [1,4,7,2,9,13,5,8,2,9],
        bar_height = 50,
        bar_padding = 10,
        svg_height = (bar_height + bar_padding) * data.length,
        svg_width = 500

      let scale = d3.scaleLinear()
        .domain([0, d3.max(data)])
        .range([0, svg_width])

      let svg = d3.select('#bar')
        .append('svg')
        .attr('width', svg_width)
        .attr('height', svg_height)

      let bar = svg.selectAll('g')
        .data(data)
        .enter()
        .append('g')
        .attr('transform', function (d, i) {
          return 'translate(0, ' + i * (bar_height + bar_padding) + ')'
        })
      // rect
      bar.append('rect')
        .attr('width', function (d) { return scale(d) })
        .attr('height', bar_height)
        .attr('fill', 'steelblue')

      // text
      bar.append('text')
        .text(function (d) { return d })
        .attr('x', function (d) { return scale(d) })
        .attr('y', bar_height / 2)
        .attr('text-anchor', 'end')

      /**
       * attr() 不支持 多段样式
       * attr({
       *  'x': function (d) { return scale(d) },
       *  'y': bar_height / 2,
       *  'text-anchor': 'end'
       * })
       */
    }
  },
  mounted() {
    this.init()
  }
}
</script>

<style lang="css">
</style>
